<!-- saved from url=(0044)http://www.jq22.com/code/20170111005220.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>休息一下</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #2c3e50;
            min-width: 300px;
        }

        section {
            margin-top: 10px;
        }

        .board {
            margin: auto;
            margin-top: 10px;
            width: 600px;
            height: 600px;
        }

        .boardRow {
            width: 100%;
            height: 6.66667%;
            border-bottom: 1px solid #2c3e50;
            box-sizing: border-box;
        }

        .boardCol {
            width: 6.66667%;
            height: 100%;
            background-color: #34495e;
            float: left;
            border-radius: 3px;
            border-left: 1px solid #2c3e50;
            box-sizing: border-box;
        }

        .boardCellCross {
            margin: auto;
            margin-top: 0.65%;
            width: 3px;
            height: 98.7%;
            background-color: #2ecc71;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            border-radius: 1.5px;
        }

        .boardCellCross:before {
            background-color: inherit;
            border-radius: inherit;
            height: inherit;
            width: inherit;
            position: absolute;
            content: "";
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .boardCellCircle {
            margin: 15%;
            width: 70%;
            height: 70%;
            border: 3px solid #e74c3c;
            border-radius: 50%;
            box-sizing: border-box;
        }

        .controls {
            width: 600px;
            height: 40px;
            margin: auto;
        }

        .newGameCtrl, .sizeCtrl, .messages {
            position: relative;
            display: inline-block;
            height: 100%;
            width: 6.66667%;
        }

        .sizeCtrl, .messages {
            float: right;
        }

        .messages {
            width: 73.33333%;
            z-index: 0;
        }

        #check {
            display: none;
        }

        .newContainer {
            z-index: 10;
        }

        .newMain, .sizeScale, .messagesContainer {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 50;
            display: table;
            text-align: center;
        }

        .newMain, .sizeScale {
            cursor: pointer;
            background-color: #2ecc71;
            border-radius: 50%;
        }

        .newMain:hover, .sizeScale:hover {
            background-color: #e74c3c;
        }

        .newMainText {
            font-family: "Roboto", sans-serif;
            font-size: 13px;
            color: #2c3e50;
            display: table-cell;
            vertical-align: middle;
        }

        .messagesContainer .newMainText {
            color: #2ecc71;
        }

        .messagesContainer .looseState {
            color: #e74c3c;
        }

        .newPlate {
            width: 100%;
            height: 100%;
            opacity: 0;
            -webkit-transition: all 0.2s ease-in;
            transition: all 0.2s ease-in;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 5;
        }

        .newPlate:hover {
            background-color: #34495e;
        }

        .newPlate:nth-of-type(1) {
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
        }

        .newPlate:nth-of-type(2) {
            -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
        }

        #check:checked ~ .newMain + .newContainer .newPlate {
            opacity: 1;
        }

        #check:checked ~ .newMain + .newContainer .newPlate:nth-of-type(1) {
            left: 100%;
        }

        #check:checked ~ .newMain + .newContainer .newPlate:nth-of-type(2) {
            left: 200%;
        }

    </style>
    <style type="text/css">object, embed {
        -webkit-animation-duration: .001s;
        -webkit-animation-name: playerInserted;
        -ms-animation-duration: .001s;
        -ms-animation-name: playerInserted;
        -o-animation-duration: .001s;
        -o-animation-name: playerInserted;
        animation-duration: .001s;
        animation-name: playerInserted;
    }

    @-webkit-keyframes playerInserted {
        from {
            opacity: 0.99;
        }
        to {
            opacity: 1;
        }
    }

    @-ms-keyframes playerInserted {
        from {
            opacity: 0.99;
        }
        to {
            opacity: 1;
        }
    }

    @-o-keyframes playerInserted {
        from {
            opacity: 0.99;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes playerInserted {
        from {
            opacity: 0.99;
        }
        to {
            opacity: 1;
        }
    }</style>
    <script>//console.log('a')
    </script>
</head>
<body>

<section>
    <div class="controls">
        <div class="newGameCtrl">
            <input type="checkbox" id="check">
            <label class="newMain" for="check">
                <div class="newMainText">new</div>
            </label>
            <div class="newContainer">
                <div class="newPlate">
                    <div class="boardCellCircle" id="new-O"></div>
                </div>
                <div class="newPlate">
                    <div class="boardCellCross" id="new-X"></div>
                </div>
            </div>
        </div>
        <div class="sizeCtrl">
            <div class="newMain">
                <div class="newMainText" id="scale-Up">+</div>
            </div>
        </div>
        <div class="sizeCtrl">
            <div class="newMain">
                <div class="newMainText" id="scale-Down">-</div>
            </div>
        </div>
        <div class="messages">
            <div class="messagesContainer">
                <div class="newMainText" id="message">try to get 5 in a row!</div>
            </div>
        </div>
    </div>
    <div class="board">
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="0-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="0-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="1-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="1-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="2-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="2-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="3-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="3-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="4-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="4-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="5-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="5-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="6-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="6-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="7-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell boardCellCross" id="7-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="7-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="8-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="8-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="9-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="9-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="10-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="10-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="11-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="11-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="12-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="12-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="13-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="13-14"></div>
            </div>
        </div>
        <div class="boardRow">
            <div class="boardCol">
                <div class="boardCell" id="14-0"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-1"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-2"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-3"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-4"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-5"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-6"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-7"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-8"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-9"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-10"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-11"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-12"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-13"></div>
            </div>
            <div class="boardCol">
                <div class="boardCell" id="14-14"></div>
            </div>
        </div>
    </div>
</section>

<script>
    /**
     * browserify, combines 3 modules
     */
    (function e(t, n, r) {
        function s(o, u) {
            if (!n[o]) {
                if (!t[o]) {
                    var a = typeof require == "function" && require;
                    if (!u && a) return a(o, !0);
                    if (i) return i(o, !0);
                    var f = new Error("Cannot find module '" + o + "'");
                    throw f.code = "MODULE_NOT_FOUND", f
                }
                var l = n[o] = {
                    exports: {}
                };
                t[o][0].call(l.exports, function (e) {
                    var n = t[o][1][e];
                    return s(n ? n : e)
                }, l, l.exports, e, t, n, r)
            }
            return n[o].exports
        }

        var i = typeof require == "function" && require;
        for (var o = 0; o < r.length; o++) s(r[o]);
        return s
    })({
        /**
         * browserify ends, modules:
         */
        1: [function (require, module, exports) {

            module.exports = function () {
                var win = [
                    [1, 1, 1, 1, 1]
                ];
                var unCovered4 = [
                    [0, 1, 1, 1, 1, 0]
                ];
                var unCovered3 = [
                    [0, 1, 1, 1, 0, 0],
                    [0, 0, 1, 1, 1, 0],
                    [0, 1, 0, 1, 1, 0],
                    [0, 1, 1, 0, 1, 0]
                ];
                var unCovered2 = [
                    [0, 0, 1, 1, 0, 0],
                    [0, 1, 0, 1, 0, 0],
                    [0, 0, 1, 0, 1, 0],
                    [0, 1, 1, 0, 0, 0],
                    [0, 0, 0, 1, 1, 0],
                    [0, 1, 0, 0, 1, 0]
                ];
                var covered4 = [
                    [-1, 1, 0, 1, 1, 1],
                    [-1, 1, 1, 0, 1, 1],
                    [-1, 1, 1, 1, 0, 1],
                    [-1, 1, 1, 1, 1, 0],
                    [0, 1, 1, 1, 1, -1],
                    [1, 0, 1, 1, 1, -1],
                    [1, 1, 0, 1, 1, -1],
                    [1, 1, 1, 0, 1, -1]
                ];
                var covered3 = [
                    [-1, 1, 1, 1, 0, 0],
                    [-1, 1, 1, 0, 1, 0],
                    [-1, 1, 0, 1, 1, 0],
                    [0, 0, 1, 1, 1, -1],
                    [0, 1, 0, 1, 1, -1],
                    [0, 1, 1, 0, 1, -1],
                    [-1, 1, 0, 1, 0, 1, -1],
                    [-1, 0, 1, 1, 1, 0, -1],
                    [-1, 1, 1, 0, 0, 1, -1],
                    [-1, 1, 0, 0, 1, 1, -1]
                ];

                (function () { //add same combinations for another player
                    var allCombos = [win, unCovered4, unCovered3, unCovered2, covered4, covered3];
                    for (var k = 0; k < allCombos.length; k++) {
                        var temp = [];
                        for (var j = 0; j < allCombos[k].length; j++) {
                            var tmp = [];
                            for (var i = 0; i < allCombos[k][j].length; i++)
                                tmp[i] = -allCombos[k][j][i];
                            temp.push(tmp);
                        }
                        for (var m = 0; m < temp.length; m++) {
                            allCombos[k].push(temp[m]);
                        }
                    }
                }());

                var valueCombo = function (w, u2, u3, u4, c3, c4) {
                    if (w > 0) return 1000000000;
                    if (u4 > 0) return 100000000;
                    if (c4 > 1) return 10000000;
                    if (u3 > 0 && c4 > 0) return 1000000;
                    if (u3 > 1) return 100000;

                    if (u3 == 1) {
                        if (u2 == 3) return 40000;
                        if (u2 == 2) return 38000;
                        if (u2 == 1) return 35000;
                        return 3450;
                    }

                    if (c4 == 1) {
                        if (u2 == 3) return 4500;
                        if (u2 == 2) return 4200;
                        if (u2 == 1) return 4100;
                        return 4050;
                    }

                    if (c3 == 1) {
                        if (u2 == 3) return 3400;
                        if (u2 == 2) return 3300;
                        if (u2 == 1) return 3100;
                    }

                    if (c3 == 2) {
                        if (u2 == 2) return 3000;
                        if (u2 == 1) return 2900;
                    }

                    if (c3 == 3) {
                        if (u2 == 1) return 2800;
                    }

                    if (u2 == 4) return 2700;
                    if (u2 == 3) return 2500;
                    if (u2 == 2) return 2000;
                    if (u2 == 1) return 1000;
                    return 0;
                };

                var findArray = function (arr, inArr) {
                    var fCount = arr.length;
                    var sCount = inArr.length;
                    var k;
                    for (var i = 0; i <= fCount - sCount; i++) {
                        k = 0;
                        for (var j = 0; j < sCount; j++) {
                            if (arr[i + j] == inArr[j]) k++;
                            else break;
                        }
                        if (k == sCount) return true;
                    }
                    return false;
                };

                var isAnyInArrays = function (combos, arr) {
                    for (var i = 0; i < combos.length; i++) {
                        if (findArray(arr, combos[i])) return true;
                    }
                    return false;
                };

                var combinations = {};
                combinations.winValue = 1000000000;
                combinations.valuePosition = function (arr1, arr2, arr3, arr4) { // 4 directions
                    var w = 0,
                        u2 = 0,
                        u3 = 0,
                        u4 = 0,
                        c3 = 0,
                        c4 = 0;
                    var allArr = [arr1, arr2, arr3, arr4];
                    for (var i = 0; i < allArr.length; i++) {
                        if (isAnyInArrays(win, allArr[i])) {
                            w++;
                            continue;
                        }
                        if (isAnyInArrays(covered4, allArr[i])) {
                            c4++;
                            continue;
                        }
                        if (isAnyInArrays(covered3, allArr[i])) {
                            c3++;
                            continue;
                        }
                        if (isAnyInArrays(unCovered4, allArr[i])) {
                            u4++;
                            continue;
                        }
                        if (isAnyInArrays(unCovered3, allArr[i])) {
                            u3++;
                            continue;
                        }
                        if (isAnyInArrays(unCovered2, allArr[i])) {
                            u2++;
                        }
                    }
                    return valueCombo(w, u2, u3, u4, c3, c4);
                };
                return combinations;
            };
        }, {}],
        2: [function (require, module, exports) {
            Array.matrix = function (m, n, initial) {
                var a, i, j, mat = [];
                for (i = 0; i < m; i++) {
                    a = [];
                    for (j = 0; j < n; j++) {
                        a[j] = initial;
                    }
                    mat[i] = a;
                }
                return mat;
            };

            var initCombinations = require('./combinations');

            module.exports = function (player) {
                var gameSize = 5; // 5 in line
                var ring = 1; // ring size around current cells
                var win = false;
                var cellsCount = 15;
                var curState = Array.matrix(15, 15, 0);
                var complexity = 1;
                var maxPlayer = player || -1; // X = 1, O = -1
                var combinations = initCombinations();
                if (maxPlayer === -1) curState[7][7] = 1;

                var checkWin = function () {
                    for (var i = 0; i < cellsCount; i++) {
                        for (var j = 0; j < cellsCount; j++) {
                            if (curState[i][j] == 0) continue;
                            var playerVal = combinations.valuePosition(
                                getCombo(curState, curState[i][j], i, j, 1, 0),
                                getCombo(curState, curState[i][j], i, j, 0, 1),
                                getCombo(curState, curState[i][j], i, j, 1, 1),
                                getCombo(curState, curState[i][j], i, j, 1, -1)
                            );
                            if (playerVal === combinations.winValue) {
                                win = true;
                            }
                        }
                    }
                };

                var miniMax = function minimax(node, depth, player, parent) {
                    if (depth == 0) return heuristic(node, parent);
                    var alpha = Number.MIN_VALUE;
                    var childs = getChilds(node, player);
                    for (var i = 0; i < childs.length; i++) {
                        alpha = Math.max(alpha, -minimax(childs[i], depth - 1, -player, node));
                    }
                    return alpha;
                };

                var isAllSatisfy = function (candidates, pointX, pointY) {
                    var counter = 0;
                    for (var i = 0; i < candidates.length; i++) {
                        if (pointX != candidates[i][0] || pointY != candidates[i][1]) counter++;
                    }
                    return counter == candidates.length;
                };

                var getChilds = function (parent, player) {
                    var children = [];
                    var candidates = [];
                    for (var i = 0; i < cellsCount; i++) {
                        for (var j = 0; j < cellsCount; j++) {
                            if (parent[i][j] != 0) {
                                for (var k = i - ring; k <= i + ring; k++) {
                                    for (var l = j - ring; l <= j + ring; l++) {
                                        if (k >= 0 && l >= 0 && k < cellsCount && l < cellsCount) {
                                            if (parent[k][l] == 0) {
                                                var curPoint = [k, l];
                                                var flag = isAllSatisfy(candidates, curPoint[0], curPoint[1]);
                                                if (flag) candidates.push(curPoint);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    for (var f = 0; f < candidates.length; f++) {
                        var tmp = Array.matrix(cellsCount, cellsCount, 0);
                        for (var m = 0; m < cellsCount; m++) {
                            for (var n = 0; n < cellsCount; n++) {
                                tmp[m][n] = parent[m][n];
                            }
                        }
                        tmp[candidates[f][0]][candidates[f][1]] = -player;
                        children.push(tmp);
                    }
                    return children;
                };

                var getCombo = function (node, curPlayer, i, j, dx, dy) {
                    var combo = [curPlayer];
                    for (var m = 1; m < gameSize; m++) {
                        var nextX1 = i - dx * m;
                        var nextY1 = j - dy * m;
                        if (nextX1 >= cellsCount || nextY1 >= cellsCount || nextX1 < 0 || nextY1 < 0) break;
                        var next1 = node[nextX1][nextY1];
                        if (node[nextX1][nextY1] == -curPlayer) {
                            combo.unshift(next1);
                            break;
                        }
                        combo.unshift(next1);
                    }
                    for (var k = 1; k < gameSize; k++) {
                        var nextX = i + dx * k;
                        var nextY = j + dy * k;
                        if (nextX >= cellsCount || nextY >= cellsCount || nextX < 0 || nextY < 0) break;
                        var next = node[nextX][nextY];
                        if (next == -curPlayer) {
                            combo.push(next);
                            break;
                        }
                        combo.push(next);
                    }
                    return combo;
                };

                var heuristic = function (newNode, oldNode) {
                    for (var i = 0; i < cellsCount; i++) {
                        for (var j = 0; j < cellsCount; j++) {
                            if (newNode[i][j] != oldNode[i][j]) {
                                var curCell = newNode[i][j];
                                var playerVal = combinations.valuePosition(
                                    getCombo(newNode, curCell, i, j, 1, 0),
                                    getCombo(newNode, curCell, i, j, 0, 1),
                                    getCombo(newNode, curCell, i, j, 1, 1),
                                    getCombo(newNode, curCell, i, j, 1, -1)
                                );
                                newNode[i][j] = -curCell;
                                var oppositeVal = combinations.valuePosition(
                                    getCombo(newNode, -curCell, i, j, 1, 0),
                                    getCombo(newNode, -curCell, i, j, 0, 1),
                                    getCombo(newNode, -curCell, i, j, 1, 1),
                                    getCombo(newNode, -curCell, i, j, 1, -1)
                                );
                                newNode[i][j] = -curCell;
                                return 2 * playerVal + oppositeVal;
                            }
                        }
                    }
                    return 0;
                };

                var getLogic = {};
                getLogic.winState = "";
                getLogic.makeAnswer = function (x, y) {
                    var that = this;
                    curState[x][y] = maxPlayer;
                    checkWin();
                    if (win) {
                        that.winState = "you win";
                        return "";
                    }
                    var answ = [-1, -1];
                    var c = getChilds(curState, maxPlayer);
                    var maxChild = -1;
                    var maxValue = Number.MIN_VALUE;
                    for (var k = 0; k < c.length; k++) {
                        var curValue = miniMax(c[k], 0, -maxPlayer, curState);
                        if (complexity > 1) {
                            //var curValue2 = miniMax(c[k], complexity - 1, -maxPlayer, curState);
                            //use it for more complex game!
                        }
                        if (maxValue < curValue) {
                            maxValue = curValue;
                            maxChild = k;
                        }
                    }
                    for (var i = 0; i < cellsCount; i++) {
                        for (var j = 0; j < cellsCount; j++) {
                            if (c[maxChild][i][j] != curState[i][j]) {
                                answ[0] = i;
                                answ[1] = j;
                                curState[answ[0]][answ[1]] = -maxPlayer;
                                checkWin();
                                if (win) {
                                    that.winState = "you lost";
                                }
                                return answ;
                            }
                        }
                    }
                    return answ;
                };
                return getLogic;
            };
        }, {
            "./combinations": 1
        }],
        3: [function (require, module, exports) {
            $(document).ready(function () {
                var initLogic = require('./gomoku/logic');
                var logic = initLogic();

                $("#7-7").addClass("boardCellCross");
                var currValue = -1; // player - O, computer - X
                var gameOver = false;

                $('div.boardCol').mousedown(handleMouseDown);

                function handleMouseDown(e) {
                    if (gameOver) return "";
                    var cell = $(this);
                    if (cell.children().hasClass("boardCellCircle")) return "";
                    if (cell.children().hasClass("boardCellCross")) return "";
                    var indexes = (cell.children().attr('id')).split("-");
                    var answer = logic.makeAnswer(indexes[0], indexes[1]);
                    if (answer !== "") {
                        var getedId = '#' + answer[0] + '-' + answer[1];
                        $(getedId).addClass(deserve());
                    } else currValue *= -1;
                    cell.children().addClass(deserve());

                    function deserve() {
                        currValue *= -1;
                        if (currValue === 1) {
                            return "boardCellCross";
                        }
                        return "boardCellCircle";
                    }

                    if (logic.winState !== "") {
                        var message = $("#message");
                        message.text(logic.winState);
                        gameOver = true;
                        message.removeClass("looseState");
                        if (logic.winState === "you lost") {
                            message.addClass("looseState");
                        }
                    }
                }

                $("#scale-Up").click(handleScale);
                $("#scale-Down").click(handleScale);

                function handleScale(e) {
                    var value = 100;
                    var minValue = 300;
                    var delta = $(this).attr('id').split("-")[1];
                    var board = $(".board");
                    var controls = $(".controls");
                    if (delta === "Up") {
                        board.width(board.width() + value);
                        board.height(board.height() + value);
                        controls.width(controls.width() + value);
                        controls.height(controls.height() + value / 15);
                    }
                    if (delta === "Down" && board.width() > minValue) {
                        board.width(board.width() - value);
                        board.height(board.height() - value);
                        controls.width(controls.width() - value);
                        controls.height(controls.height() - value / 15);
                    }
                }

                $("#new-O").parent().click(handleNewGame);
                $("#new-X").parent().click(handleNewGame);

                function handleNewGame(e) {
                    var index = ($(this).children().attr('id')).split("-")[1];
                    $(".boardCell").removeClass("boardCellCross boardCellCircle");
                    gameOver = false;
                    $("#message").text("");
                    if (index === "O") {
                        logic = initLogic();
                        $("#7-7").addClass("boardCellCross");
                        currValue = -1;
                    }
                    if (index === "X") {
                        logic = initLogic(1);
                        currValue = 1;
                    }
                    $("#check").prop('checked', false);
                }
            });
        }, {
            "./gomoku/logic": 2
        }]
    }, {}, [3])
</script>
</body>
</html>
